<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      @keydown.enter="handler"
    />
  </div>
</template>

<script>
export default {
  name: "",
  props: ["addTodo"],
  methods: {
    //键盘事件
    handler(event) {
      //父组件需要添加一个元素:title,即为表单元素里面内容！！！获取表单元素内容 ref  v-model   event
      let title = event.target.value;
      //准备新的事件
      let newTodo = { id: Date.now(), title, done: false };
      //调用父亲的方法
      this.addTodo(newTodo);
      //清空表单元素文本内容
      event.target.value = "";
    },
  },
};
</script>

<style scoped>
</style>
